<template>
	<view style="height: 100%">
		<!-- pages/orderDetail/orderDetail.wxml -->
		<view class="status">
			订单{{ orders.Fstatus == '1' ? '待付款' : orders.Fstatus == '2' ? '待发货' : orders.Fstatus == '3' ? '部分发货' : orders.Fstatus == '4' ? '待收货' : '已完成' }}
		</view>
		<view class="express">
			<view class="addname">{{ orders.Fprovince }}{{ orders.Fcity }}{{ orders.Fzone }}{{ orders.Faddress }}</view>
			<view class="adduname">{{ orders.Fname }} {{ orders.Fmobile }}</view>
		</view>

		<view class="orderList">
			<view class="orderItem">
				<view :id="orders.Fcode" @tap="showDetail">
					<view class="order_title v-center">
						<text>订单号：{{ orders.Fcode }}</text>
					</view>
					<view class="proList">
						<view class="proItem" v-for="(pro, i) in currPro" :key="i">
							<view class="around v-center">
								<image class="proImg" :src="pro.Fimg"></image>
								<view class="proContext">
									<view class="proName">{{ pro.Fpname }}</view>
									<view class="proSku">{{ pro.Fattr }}</view>
								</view>
								<view class="proPrice">￥{{ pro.Fprice }}</view>
								<view class="proNum">x{{ pro.Fnum }}</view>
							</view>
						</view>
					</view>
					<view class="proTotal v-center between">
						<text>共{{ currPro.length }}件商品</text>
						<text>总计：￥{{ orders.Ftotalmoney }}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="orders.mail.length > 0" class="qr_content">
			<view class="titleBar v-center between">
				<text>提货码</text>
			</view>
			<view class="verify">
				<view class="canvas-box">
					<canvas v-if="!canvasHidden" style="width: 400rpx; height: 400rpx; margin: 0 auto"
						canvas-id="mycanvas" />
				</view>
				<view class="code algin">
					<text>提货码</text>
					<text class="red-text">{{ orders.Fhxcode }}</text>
				</view>
			</view>
		</view>
		<view class="orderDetail">
			<view class="titleBar v-center between">
				<text>订单信息</text>
			</view>
			<view class="detailList">
				<view>下单时间：{{ orders.Fdate }}</view>
				<view>
					支付方式：
					<text v-for="(item, i) in pay" :key="i">
						{{ item.Ftype == 1 ? '微信支付' : item.Ftype == 2 ? '余额支付' : item.Ftype == 3 ? '积分支付' : item.Ftype == 4 ? '优惠券抵扣' : '线下付款' }}：
						￥{{
                            item.Fmoney
                        }}
					</text>
				</view>
			</view>
		</view>
		<view v-if="orders.Fstatus == 1" class="actionBar end">
			<view @tap="cancelOrder" :data-code="orders.Fcode" class="border-btn"
				:style="'border:1rpx ' + color + ' solid;color:' + color">删除订单</view>
			<view @tap="goPay" :data-item="orders" :style="'background:' + color" class="bg-btn">立即支付</view>
		</view>
		<view v-else-if="orders.Fstatus == 2" class="actionBar end">
			<view @tap="dody" class="bg-btn" :style="'background:' + color">订阅发货通知</view>
		</view>
		<view v-else-if="orders.Fstatus == 4" class="actionBar end">
			<view @tap="showLogistics" class="border-btn" :style="'border:1rpx ' + color + ' solid;color:' + color">查看物流
			</view>
			<view @tap="confirmTake" :style="'background:' + color" class="bg-btn">确认收货</view>
		</view>
		<view v-else-if="orders.Fstatu > 3" class="actionBar end">
			<view @tap="showLogistics" class="border-btn" :style="'border:1rpx ' + color + ' solid;color:' + color">查看物流
			</view>
		</view>
		<floatIcon></floatIcon>
		<!-- 售后弹窗 -->
	</view>
</template>

<script>
	import floatIcon from '@/component/floatIcon/floatIcon';
	// pages/orderDetail/orderDetail.js
	var util = require('../../utils/util.js');
	var api = require('../../utils/prom.js');
	const app = getApp();
	var QR = require('../../lib/qr/qrcode.js');
	export default {
		components: {
			floatIcon
		},
		data() {
			return {
				color: app.globalData.color,

				orders: {
					Fstatus: '',
					Fprovince: '',
					Fcity: '',
					Fzone: '',
					Faddress: '',
					Fname: '',
					Fmobile: '',
					Fcode: '',
					Ftotalmoney: '',
					mail: [],
					Fhxcode: '',
					Fdate: '',
					Fstatu: 0
				},

				mail: [],
				pay: [],
				currPro: {},
				code: '',
				imagePath: '',
				i: '',

				pro: {
					Fimg: '',
					Fpname: '',
					Fattr: '',
					Fprice: '',
					Fnum: ''
				},

				canvasHidden: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			var code = options.code;
			this.code = code;
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.onShowClone3389();
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		methods: {
			/**
			 * 生命周期函数--监听页面显示
			 */
			onShowClone3389: function() {
				this.showDetail();
			},

			//订阅
			dody: function() {},

			showDetail: function() {
				var that = this;
				var param = {
					token: uni.getStorageSync('token'),
					code: that.code
				};
				api.request('SpOrder', 'get', param, function(res) {
					res.data.Detail.map(function(item) {
						var arr = JSON.parse(item.Fattr);
						var Fattr = '';
						for (var i in arr) {
							var row = arr[i];
							Fattr += row.Fattr + '【' + row.Fvalue + '】';
						}
						item.Fattr = Fattr;
					});
					res.data.Head.Fdate = util.formatCTime(res.data.Head.Fdate);

					that.sorders = res.data.Head;
					that.smail = res.data.Mail;
					that.spay = res.data.Pay;
					that.scurrPro = res.data.Detail;

				});
			},

			//取消订单
			cancelOrder: function(e) {
				var that = this;
				var code = e.currentTarget.dataset.code;
				uni.showModal({
					title: '提示',
					content: '确定要取消该订单吗？',
					success: function(res) {
						if (res.confirm) {
							var url = 'SpOrder?token=' + uni.getStorageSync('token') + '&code=' + code +
								'&action=del';
							api.request(url, 'post', {}, function(res) {
								uni.showToast({
									title: '取消订单成功',
									success: function() {
										uni.navigateBack({
											delta: 1
										});
									}
								});
							});
						}
					}
				});
			},

			//去支付
			goPay: function(e) {
				var that = this;
				var order = that.orders;
				var url = 'SpGoPay?token=' + uni.getStorageSync('token') + '&code=' + order.Fcode;
				api.request(url, 'post', {}, function(res) {
					uni.navigateTo({
						url: '/pages/orderSubmit/orderSubmit?Fcode=' + order.Fcode + '&source=3'
					});
				});
			},

			//查看物流
			showLogistics: function(e) {
				var that = this;
				//快递单号
				var com = e.currentTarget.id.split('|')[0];
				var expresscode = e.currentTarget.id.split('|')[1];
				var img = e.currentTarget.id.split('|')[2];
				uni.navigateTo({
					url: '/pages/logistics/logistics?com=' + com + '&expresscode=' + expresscode + '&img=' +
						escape(img) + '&tab=' + that.showtab
				});
			},

			//确认收货
			confirmTake: function(e) {
				var that = this;
				//订单号
				var fcode = e.currentTarget.id;
				console.log(fcode);
				uni.showModal({
					title: '提示',
					content: '您确定要收货吗？',
					success(res) {
						if (res.confirm) {
							var url = 'SpOrderConfig?token=' + uni.getStorageSync('token') + '&code=' + code;
							api.request(url, 'post', {}, function(res) {
								that.onShowClone3389({});
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			//适配不同屏幕大小的canvas
			setCanvasSize: function() {
				var size = {};
				try {
					var res = uni.getSystemInfoSync();
					console.log(res);
					var scale = 1.875; /*不同屏幕下canvas的适配比例；设计稿是750宽 686是因为样式wxss文件中设置的大小*/
					var width = res.windowWidth / scale;
					var height = width; //canvas画布为正方形
					size.w = width;
					size.h = height;
				} catch (e) {
					console.log('CatchClause', e);
					console.log('CatchClause', e);
					console.log('获取设备信息失败' + e);
				}
				return size;
			},

			//绘制二维码图片
			createQrCode: function(url, canvasId, cavW, cavH) {
				//调用插件中的draw方法，绘制二维码图片
				QR.api.draw(url, canvasId, cavW, cavH);
				setTimeout(() => {
					this.canvasToTempImage();
				}, 1000);
			},

			//获取临时缓存照片路径，存入data中
			canvasToTempImage: function() {
				var that = this;
				//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					success: function(res) {
						var tempFilePath = res.tempFilePath;
						console.log(tempFilePath);
						that.imagePath  = tempFilePath;
					},

					fail: function(res) {
						console.log(res);
					}
				});
			},

			showQR: function() {
				var that = this;
				var code = that.orders.Fhxcode;
				var size = that.setCanvasSize(); //动态设置画布大小
				that.createQrCode(code, 'mycanvas', size.w, size.h);
			}
		}
	};
</script>
<style>
	@import './orderDetail.css';
</style>